<template>
  <div class="tabber">
    <h3>猜你喜欢</h3>
    <!-- 综合排序 -->
    <div class="listsort">
      <span
        @click="sort(index)"
        :class="{ bol: cIndex == index }"
        v-for="(item, index) in listsort"
        :key="index"
        >{{ item }}</span
      >
    </div>
    <!-- 年货热卖 -->
    <div class="list">
      <span v-for="(item, index) in list" :key="index">{{ item }}</span>
    </div>

    <!-- 店铺信息 -->
    <div class="xinxi" v-for="(item, index) in list2" :key="index">
      <div class="imgbox">
        <img :src="item.pic" alt="" />
      </div>
      <div class="dian">
        <div class="title">{{ item.name }}</div>
        <div class="psh">
          <span>{{ item.pf }}</span>
          <span>月售{{ item.shou }}</span>
        </div>
        <div class="song">
          <div class="qisong">
            <span>起送￥{{ item.song }}</span>
            <span>远距离配送￥{{ item.psong }}</span>
            <span>￥{{ item.yaun }}</span>
          </div>
          <div class="min">
            <span>{{ item.min }}分钟</span>
            <span>{{ item.juli }}km</span>
          </div>
        </div>
        <div class="pjia">
          <span v-for="(item, index) in item.pl" :key="index">{{ item }}</span>
        </div>
        <div class="jian">
          <span v-for="(item, index) in item.jian" :key="index">{{
            item
          }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var pic =
  "https://img1.baidu.com/it/u=3870557935,2333078440&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500";
export default {
  data() {
    return {
      cIndex: "",
      listsort: ["综合排序", "距离最近", "销量最高", "筛选"],
      list: ["年货节热卖", "津贴联盟", "满减优惠", "品质联盟"],
      // 店铺信息
      list2: [
        {
          pic: pic,
          name: "烧烤",
          pf: 4.3,
          shou: 672,
          song: 25,
          psong: 4,
          yaun: 6,
          min: 30,
          juli: 3.9,
          pl: ["扬州炒饭棒棒的", "扬州炒饭棒棒的"],
          jian: ["35减12", "33减6", "50减20"],
        },
        {
          pic: pic,
          name: "饺子馆",
          pf: 4.8,
          shou: 132,
          song: 32,
          yaun: 4,
          psong: 4,
          min: 50,
          juli: 2.1,
          pl: ["扬州炒饭棒棒的", "扬的"],
          jian: ["35减12", "33减6", "50减20"],
        },
        {
          pic: pic,
          name: "烤鸡",
          pf: 3.1,
          shou: 1562,
          song: 42,
          yaun: 8,
          psong: 4,
          min: 27,
          juli: 7.8,
          pl: ["扬州炒饭棒棒的", "扬州炒会话的"],
          jian: ["50减20"],
        },
      ],
    };
  },
  methods: {
    // 当点击综合排序按评分排
    sort(index) {
      this.cIndex = index;
      if (index == 0) {
        // 当点击综合排序按照评分排序
        this.list2.sort((a, b) => {
          return b.pf - a.pf;
        });
        // 当点击距离最近按距离排序
      } else if (index == 1) {
        this.list2.sort((a, b) => {
          return a.juli - b.juli;
        });
        // 当点击销量最高按销量排序
      } else if (index == 2) {
        this.list2.sort((a, b) => {
          return b.shou - a.shou;
        });
        // 点击筛选按时间排序
      } else if (index == 3) {
        this.list2.sort((a, b) => {
          return a.min - b.min;
        });
      }
    },
  },
};
</script>

<style lang='scss' scoped >
.tabber {
  margin: 10px;
}

.tabber .listsort {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
}

.tabber .list {
  display: flex;
  text-align: center;
  margin-bottom: 20px;
}

.tabber .list span {
  box-sizing: border-box;
  font-size: 14px;
  padding: 6px;
  display: inline-block;
  background-color: #f5f5f5;
  margin-left: 4px;
  width: 25%;
  border-radius: 6px;
}

/* 店铺信息 */
.xinxi {
  box-sizing: border-box;
  display: flex;
  padding-bottom: 20px;
}

.xinxi .imgbox {
  height: 100px;
  margin-right: 10px;
}

.xinxi .imgbox img {
  height: 100%;
}

/* 店铺详细信息 */
.xinxi .dian {
  display: flex;
  flex-direction: column;
}

/* 店铺名称 */
.xinxi .dian .title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
}

/* 月售 */
.xinxi .dian .psh {
  font-size: 12px;
  color: #999;
  margin-bottom: 5px;
}

.xinxi .dian .psh span {
  display: inline-block;
  margin-right: 5px;
}

.xinxi .dian .psh span:nth-child(1) {
  color: red;
}

/* 配送 */
.xinxi .dian .song {
  color: #999;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.xinxi .dian .song .qisong {
  flex: 1;
  margin-right: 10px;
}

.xinxi .dian .song .qisong span:nth-child(3) {
  font-size: 6px;
  color: #999;
  text-decoration: line-through;
}

.xinxi .dian .song span {
  display: inline-block;
  margin-right: 2px;
}

/* 评价 */
.xinxi .dian .pjia {
  font-size: 10px;
  color: orange;
  margin-bottom: 5px;
}

.xinxi .dian .pjia span {
  background-color: rgb(226, 210, 181);
  margin-right: 4px;
  border-radius: 4px;
}

/* 满减 */

.xinxi .dian .jian {
  display: flex;
  font-size: 10px;
}
.xinxi .dian .jian span {
  font-size: 8px;
  margin: 6px 0;
  color: red;
  border: 1px solid red;
  display: inline-block;
  margin-right: 5px;
  border-radius: 4px;
}

/* 排序点击后样式的变化 */
.bol {
  font-weight: bold;
}
</style>